<template>
  <div class="artist">
    <br />
    <b-row align-v="center" align-h="center" style="margin: -5px">
      <b-col cols="auto">
        <b-img thumbnail :src="artist.image" style="max-height: 300px; max-width: 520px" />
      </b-col>
      <b-col
        class="content_info"
        style="font-family: Segoe UI, Microsoft Yahei, Verdana, Tahoma, Arial; font-size: 14px; color: white"
      >
        <b-row>
          <b-col
            style="font-family: Segoe UI, Verdana, Microsoft Yahei, Tahoma, Arial; font-size: 22px; font-weight: bold; color: #70dca6; margin-top: 5px"
          >{{ artist.name }}</b-col>
        </b-row>
        <b-row>
          <b-col>
            <span v-if="artist.name_chs">中文译名：{{ artist.name_chs }}</span>
          </b-col>
        </b-row>
        <b-row>
          <b-col cols="auto" style="padding-right: 0px">所属类型：</b-col>
          <router-link :to="{path: '/category/'+artist.category}">
          <b-col style="padding-left: 0px" v-if="artist.category == 'britpop'">英伦摇滚乐</b-col>
          <b-col style="padding-left: 0px" v-else-if="artist.category == 'scotland'">苏格兰流行乐</b-col>
          <b-col style="padding-left: 0px" v-else-if="artist.category == 'ireland'">爱尔兰流行乐</b-col>
          <b-col style="padding-left: 0px" v-else-if="artist.category == 'shoegaze'">自赏派音乐</b-col>
          <b-col style="padding-left: 0px" v-else-if="artist.category == 'electronic'">英国电子乐</b-col>
          <b-col style="padding-left: 0px" v-else-if="artist.category == 'classic'">经典老摇滚</b-col>
          <b-col style="padding-left: 0px" v-else-if="artist.category == 'female'">英伦玫瑰</b-col>
          <b-col style="padding-left: 0px" v-else-if="artist.category == 'male'">英伦男声</b-col>
		  <b-col style="padding-left: 0px" v-else-if="artist.category == 'indie'">新生代独立音乐</b-col>
		  </router-link>
        </b-row>
        <b-row v-if="artist.styles">
          <b-col>
            音乐风格：<span v-for="(item, index) in artist.styles" :key="index">
              <span v-if="index === artist.styles.length - 1">{{ item }}</span>
              <span v-else>{{ item }}&nbsp;&nbsp;/&nbsp;&nbsp;</span>
            </span>
          </b-col>
        </b-row>
        <b-row>
          <b-col>国家地区：{{ artist.nation }}&nbsp;{{ artist.city }}</b-col>
        </b-row>
		<span v-if="artist.website">
		  <b-row>
          <b-col>官方网站：<span class="website"><a :href="artist.website" target="_blank">{{ artist.website }}</a></span></b-col>
		  </b-row>
		</span>      
        <b-row>
		  <span v-if="artist.single">
			<b-col>出生年份：{{ artist.date_form }}</b-col>
		  </span>
		  <span v-else>
		    <b-col>成立年份：{{ artist.date_form }}</b-col>
		  </span>
        </b-row>
        <b-row>
		  <span v-if="artist.single && artist.date_disband">
			<b-col>逝世年份：{{ artist.date_disband }}</b-col>
		  </span>
		  <span v-else-if="!artist.single && artist.date_disband">
		    <b-col>解散年份：{{ artist.date_disband }}</b-col>
		  </span>
        </b-row>
        <b-row style="margin-bottom: 0px"></b-row>
      </b-col>
    </b-row>

    <div class="content_biography" v-if="memberList.length > 0">
      <b-row>
        <b-col style="font-size: 18px; font-weight: bold; color: #70dca6; margin-top: 2px">主要成员</b-col>
      </b-row>
      <b-row
        v-for="(item, index) in memberList"
        :key="index"
        style="font-family: Segoe UI, Microsoft Yahei, Verdana, Tahoma, Arial; font-size: 14px; color: white; margin-bottom: 0px; padding-bottom: 2px; padding-top: 2px"
      >
        <b-col
          cols="auto"
        >{{ item.name }}&nbsp;&nbsp;/&nbsp;&nbsp;{{ item.work }}&nbsp;&nbsp;/&nbsp;&nbsp;{{ item.status }}</b-col>
      </b-row>
    </div>

    <div class="content_biography" v-if="artist.biography && artist.biography.length > 0">
      <b-row>
        <b-col style="font-size: 18px; font-weight: bold; color: #70dca6">艺人介绍</b-col>
      </b-row>
      <b-row>
        <b-col>
          <div
            v-html="artist.biography"
            style="font-family: Segoe UI, Microsoft Yahei, Verdana, Tahoma, Arial; font-size: 14px; color: white; text-align: justify"
          >{{ artist.biography }}</div>
        </b-col>
      </b-row>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
</template>

<script>
export default {
  async asyncData(context) {
    let [request1Data, request2Data] = await Promise.all([
      context.$axios.get('/api/artists-detail/', { params: { artist: context.route.params.name, showLoading: false } }),
      context.$axios.get('/api/members/', { params: { artist: context.route.params.name, showLoading: false } }),
    ]).catch(err => {
      console.log(err);
    });
    return {
      artist: request1Data.data,
      memberList: request2Data.data,
    };
  },
  data() {
    return {
      //artist: '',
      //memberList: [],
      num_images: 0,
    };
  },
  methods: {
    showArtist() {
      this.$axios
        .get('/api/artists-detail/', { params: { artist: this.$route.params.name, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.artist = res;
          this.$route.meta.title = this.artist.name + ' | 介绍';
          document.title = this.$route.meta.title;
        })
        .catch(err => {
          console.log(err);
        });
    },
    showMembers() {
      this.$axios
        .get('/api/members/', { params: { artist: this.$route.params.name, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.memberList = res;
        })
        .catch(err => {
          console.log(err);
        });
    },
    routerTo_category: function(category) {
      this.$router.push({
        path: '/category/' + category,
      });
    },
  },
  head() {
    return {
      title: this.artist.name + ' | 介绍',
    };
  },
  mounted: function() {
    this.$store.dispatch('hideloader');
    //this.showArtist();
    //this.showMembers();
    this.$route.meta.title = this.artist.name + ' | 介绍';
    document.title = this.$route.meta.title;
	this.$parent.show_tooltip1();
  },
  watch: {
    $route(to, from) {
      //this.$router.go(0)
      //this.showArtist();
      //this.showMembers();
	  this.$parent.show_tooltip1();
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.content_info {
  font-size: 15px;
  padding: 10px;
  margin: 5px;
  background-color: rgba(0, 0, 0, 0.8);
  border-style: inset;
}

.content_biography {
  font-size: 15px;
  padding: 10px;
  margin-top: 30px;
  background-color: rgba(0, 0, 0, 0.8);
  border-style: inset;
}

.content_info .row {
  padding: 5px;
  margin: 0px;
}

.content_biography .row {
  padding: 5px;
  margin: 0px;
}

.website {
  text-decoration:underline
}
</style>
